<template>
	<view class="flex_ZC">
		<view class="topmain">
			<image class="bgimg"
				src="https://images.fudiemall.com/storage/default/20250716/ssssss22b2bddf29cccea86c6684bf3794bf1e9d2c24d7.png"
				mode="aspectFill"></image>
			<view class="back flex_c">
				<image :src="baseUrl + '/static/icon/left_jt.png'" class="storeback" mode="aspectFill"
					@click="leftClick"></image>
					<!-- #ifdef H5 -->
					<view class="storeRight">
						<image :src="baseUrl + '/static/ymimage/shopPhone.png'" class="ymicon" mode="aspectFill"
							v-if="shopDetails.customer_phone!=null" @click="toPhone"></image>
						<image :src="baseUrl + '/static/ymimage/ymshare.png'" class="ymicon" mode="aspectFill"
							@click="shareflag=true"></image>
						<image :src="baseUrl + '/static/ymimage/ymsearch.png'" class="ymicon" mode="aspectFill"
							@click="goSearch"></image>
					</view>
					<!-- #endif -->
			</view>
			<view class="shopDetail flex_dq">
				<view class="flex_dq" @click.prevent="clickComprehensive">
					<image :src="shopDetails.logo" class="images" mode="aspectFill" ></image>
					<view class="flex_Z shopInfo">
						<view class="">
							<text class="sign"
								v-if="shopDetails.company_type !='sole_proprietorship' && shopDetails.company_type !='ordinary'">{{shopDetails.company_type_text}}</text>
							<text class="shopName">{{shopDetails.name}}</text>
						</view>
						<view class=" flex_dq" >
							<u-rate readonly size="20" allowHalf v-model="shopDetails.evaluate_rate" active-color="#FFC300"></u-rate>
						</view>
<!-- 						<view class=" flex_dq">
							<image class="level_img1" :src="levelimg" mode="widthFix"></image>
							<view class="flex_dq" v-for="(item,index) in levelList" :key="index">
								<image class="level_img2" :src="item" mode="aspectFill"></image>
							</view>
						</view> -->
						<view class="goods_prove">

							<view class="" v-if="shopDetails.earnest_money_total!=0.00">
								<image :src="baseUrl +'/static/ymimage/yjbzj.png'" mode="aspectFill"></image> 已缴纳保证金
							</view>
							<view v-if="shopDetails.verify_status == 3">
								<image :src="baseUrl +'/static/ymimage/zzsh.png'" mode="aspectFill"></image>资质已审核
							</view>
						</view>
					</view>
				</view>
				<view class="flex_Z">
					<text class="btn_an1 c1" v-if="be_collect == 0" @click="collect">收藏店铺</text>
					<text class="btn_an2 c9" v-else @click="cancelCollect">取消收藏</text>
					<!-- #ifdef H5 ||   MP-WEIXIN -->
					<text class="btn_an1 c1" @click="tokefu">客服</text>
					<!-- #endif -->
					<!-- #ifdef MP-ALIPAY -->

					<text class="btn_an1 c1" @click="tokefu" v-if="shopDetails.seller_type != 1">客服</text>

					<view class="" style="position: relative;" v-else>
						<view class="btn_an1">客服</view>
						<contact-button class="kefu" tnt-inst-id="Fs0_yOao" scene="SCE01350885" />
					</view>
					<!-- #endif -->

				</view>
			</view>



		</view>
		<view class="" >
			<view class="bwrap">
				<view class="bwrapitem">
					<view class="num">
						{{shopDetails.attach_total}}
					</view>
					<view class="txt">
						粉丝
					</view>
				</view>
				<view class="bwrapitem">
					<view class="num">
						{{shopDetails.sales_volume}}
					</view>
					<view class="txt">
						销量
					</view>
				</view>
				<view class="bwrapitem" style="border: none;">
					<view class="num">
						{{shopDetails.video_count}}
					</view>
					<view class="txt">
						作品
					</view>
				</view>
			</view>
			<view class="tab-nav">
				<view class="tab-list-item" v-if="license"  @click="goApplyTwo">
					<image
						src="https://images.fudiemall.com/storage/default/20250716/yyzzcd53d24e19187d5c90b8402cc2734c288114be66.png"
						mode="aspectFill"></image>
					<view class="text">
						营业执照
					</view>
			
				</view>
				<view class="tab-list-item" @click="godown">
					<image
						src="https://images.fudiemall.com/storage/default/20250716/zuopinc317266069abe6cb03a912bac1e621ef0c450e22.png"
						mode="aspectFill"></image>
					<view class="text">
						{{shopDetails.video_count}}个作品
					</view>
				
				</view>
				<view class="tab-list-item" @click="godown">
					<image
						src="https://images.fudiemall.com/storage/default/20250716/dianzanedfed376eabbee3378cfe3ef84327cd1fc02cce9.png"
						mode="aspectFill"></image>
					<view class="text">
						{{shopDetails.video_like_total}}点赞
					</view>
				
				</view>
				<view class="tab-list-item">
					<image
						src="https://images.fudiemall.com/storage/default/20250716/pingjia767a9af33eb9f96eb8df968f50b9fff32d59ac0f.png"
						mode="aspectFill"></image>
					<view class="text">
						{{shopDetails.comment}}评价
					</view>
				
				</view>
			</view>
		</view>
		<view class="astoreclass">
			<view class="classify_item" :class="classifyActive == index?'classifyActive':''"
				v-for="(item,index) in category" :key="index" @click="getcategory(item,index)">
				<text class="f28">{{item.classify&&item.classify.name}}</text>
			</view>
		</view>
		<view class="ification flex_ld_a" v-if="googsList.length>0 && indexs==0">
			<view class="ification_box flex_dq">
				<text :class="cursor == 1?'active':''" @click="cilckPx(1)">智能排序</text>
			</view>
			<view class="ification_box flex_dq" @click="changeTaggle1">
				<text :class="cursor == 2?'active':''">More值排列</text>
				<view v-if="cursor != 2">
					<u-icon name="arrow-down" color="#333333" size="16"></u-icon>
				</view>
				<view v-else>
					<u-icon v-if="jfShow" name="arrow-down" color="#FFC300" size="16"></u-icon>
					<u-icon v-else name="arrow-up" color="#FFC300" size="16"></u-icon>
				</view>
			</view>
			<view class="ification_box flex_dq" @click="changeTaggle2">
				<text :class="cursor == 3?'active':''">价格排列</text>
				<view v-if="cursor != 3">
					<u-icon name="arrow-down" color="#333333" size="16"></u-icon>
				</view>
				<view v-else>
					<u-icon v-if="jgShow" name="arrow-down" color="#FFC300" size="16"></u-icon>
					<u-icon v-else name="arrow-up" color="#FFC300" size="16"></u-icon>
				</view>
			</view>
			<view class="ification_box flex_dq">
				<text :class="cursor == 4?'active':''" @click="cilckPx(4)">销量排列</text>
				<view v-if="cursor != 4">
					<u-icon name="arrow-down" color="#333333" size="16"></u-icon>
				</view>
				<view v-else>
					<u-icon v-if="jgShow" name="arrow-down" color="#FFC300" size="16"></u-icon>
					<u-icon v-else name="arrow-up" color="#FFC300" size="16"></u-icon>
				</view>
			</view>


		</view>

		<view class="goods " v-if=" indexs==0">
			<view class="goods_box flex_Z" v-for="(item,index) in googsList" :key="index" @click="goDetails(item.id)">
				<image :src="item.thumb" mode="aspectFill"></image>
				<view class="goods_btm">
					<text class="f28 c3 overflow2">{{item.name}}</text>
					<text class="f24 c0  gradient1 integral">+ {{item.integral_proportion}}%More值</text>
					<text class="sign"
						v-if="shopDetails.company_type !='sole_proprietorship' && shopDetails.company_type !='ordinary'">{{shopDetails.company_type_text}}</text>
					<view class="goods_btm_price flex_ld">
						<view class=" flex_dq">
							<text class="f24 c4">￥</text>
							<text class="f34 c4 fw7 price">{{item.min_price}}</text>
							<text class="f24 c9 delect"
								v-if="Number(item.max_origin_price) > Number(item.min_price)">￥{{item.max_origin_price}}</text>
						</view>
						<text class="f24 c9"
							v-if="Number(item.max_origin_price) < Number(item.min_price)">已抢{{item.total_sales}}件</text>
					</view>
				</view>
			</view>
		</view>
		<u-popup :show="flagsh2" mode="center" @close="flagsh2 = false" closeable bgColor="transparent">
			<view class="prompt flex_ZC">
				<text class="f36">提示</text>
				<text class="prompt_tit">确定取消收藏吗</text>
				<view class="prompt_ntm flex_ld_a">
					<text @click="flagsh2 = false">再想想</text>
					<text @click="submitsh">确定</text>
				</view>
			</view>
		</u-popup>
		<u-popup :show="introduction" :round='15' mode="center" @close="introduction = false" closeable>
			<view class="shopjianjie flex_ZC">
				<text class="shopintr">店铺简介</text>
				<text class="f24 c3">{{shopDetails.introduction}}</text>
			</view>
		</u-popup>
		<u-popup :show="shareflag" mode="bottom" @close="shareflag=false" :safeAreaInsetBottom="false" :closeable="true"
			bgColor="transparent" :closeOnClickOverlay="false">
			<view class="sharewrap">
				<view class="shareitem" @click="copyCurrentPagePath">
					<image
						src="https://images.fudiemall.com/storage/default/20250423/lianjie05d677a617d5cae918b1e8e456dc3f53231a46c6.png"
						mode="aspectFill"></image>
					<text>复制链接</text>
				</view>
				<view class="shareitem" v-if="!iswxflag"
					@click="hbflag=true,shareflag=false,canvasDraw(shopDetails,qrcodeimg)">
					<image
						src="https://images.fudiemall.com/storage/default/20250423/fenxianghaibao998f386470e2bc1bae873632b1d6a65088c0d571.png"
						mode="aspectFill"></image>
					<text>分享海报</text>
				</view>
				<view class="shareitem" v-if="iswxflag" @click="shareToWechat">
					<image
						src="https://images.fudiemall.com/storage/default/20250423/wx9be87cb35b101c40f077a2c04ea9deaa8478182c.png"
						mode="aspectFill"></image>
					<text>分享到微信</text>
				</view>
				<view class="shareitem" @click="gosharelist">
					<image
						src="https://images.fudiemall.com/storage/default/20250522/groupchat8347f23f96f5df3c93e9b39b84ec236f0685722e.png"
						mode="aspectFill"></image>
					<text>分享到群聊</text>
				</view>
				<!-- #ifdef MP-ALIPAY -->
				<view class="shareitem">
					<image :src="baseUrl+ '/static/image/shareapliay.png'" mode="aspectFill"></image>
					<text>分享到支付宝</text>
					<button open-type="share" class="sharebtn"></button>
				</view>
				<!-- #endif -->
			</view>
		</u-popup>
		<u-popup :show="hbflag" mode="center" @close="hbflag=false" :closeable="true" bgColor="transparent"
			:closeOnClickOverlay="false">
			<view class="hbwraps">
				<canvas style="width: 690rpx; height: 336rpx;margin: 0 auto;" canvas-id="inviteCanvas"
					id="inviteCanvas"></canvas>
				<view class="btn" @click="save1">
					保存图片
				</view>
			</view>

		</u-popup>
		<u-popup :show="Downshow" mode="center" @close="Downshow = false" closeable bgColor="transparent">
			<view class="prompt flex_ZC">
				<text class="f36">提示</text>
				<text class="prompt_tit">请前往福叠猫App</text>
				<view class="prompt_ntm flex_ld_a">
					<text @click="Downshow = false">再想想</text>
					<text @click="gonext()">现在去</text>
				</view>
			</view>
		</u-popup>
		
			<noDatas v-if="indexs==0" :xxxList="googsList" :status="status"></noDatas>
			<view class="empty3">
				
			</view>
			<view class="bottab">
				<view class="bottabitem" @click="goSearch">
					搜索
				</view>
				<view class="bottabitem" @click="toPhone()">
					电话
				</view>
				<view class="bottabitem" @click="shareflag=true" style="border: none;">
					分享
				</view>
			</view>
	</view>
</template>

<script>
	// #ifdef H5
	import wx from 'weixin-js-sdk';
	// #endif
	import {
		cloudList,
		categoryList
	} from "../../api/cloudMall.js"
	import {
		shopDetail,
		shopCollect,
		cancelCollect
	} from "../../api/settled.js"
	import {
		qrcode,
		wxConfig,
		shareMall
	} from "../../api/other.js"
	import {
		myuser
	} from "../../api/user.js"
	import {
		envflag
	} from '../../utils/request.js';
	export default {
		data() {
			return {
				baseUrl: this.$imageBaseUrl,
				googsList: [],
				indexs: 0,
				status: 'loadmore', //加载前值为loadmore，加载中为loading，没有数据为nomore
				bgColor: 'transparent',
				inx: 0,
				value: 3,
				cursor: 1, //选择哪一分类
				id: "",
				info: {},
				classifyActive: 0,
				introduction: false,
				page: 1,
				size: 10,
				searchName: '', //商品
				categoryId: '', //商品id
				sortField: '', // 排序字段
				sortBy: '', // 排序方式
				merchantName: '', //商家店名
				zoneType: 0,
				shopDetails: {},
				seller_id: "",
				license:'',
				levelimg: '',
				levelList: [],
				be_collect: 0,
				flagsh2: false,
				shareflag: false,
				hbflag: false,
				ishaveurl: false,
				iswxflag: false,
				qrcodeimg: "",
				fullPath: "",
				phoneShow: false,
				category: [{
					classify: {
						id: "",
						name: "全部商品"
					},
					classify_id: ""
				}],
				Downshow:false
			}
		},
		onLoad(e) {
			// navigation 跳转携带参数或者扫描支付宝小程序自身的分享
			if (e.id) {
				this.seller_id = e.id
			}
			// 关联二维码携带的参数
			if (uni.getStorageSync("quick_payparam")) {
				this.seller_id = uni.getStorageSync("quick_payparam")
			}
			// 扫描小程序自身分享的小程序码， 关联二维码携带的邀请码在app.vue中已经保存过了
			if (e.invite_code) {
				uni.setStorageSync('inviteCode', e.invite_code)
				if (uni.getStorageSync("seller_id")) {
					uni.removeStorageSync("seller_id")
				}
			}
			if (uni.getStorageSync("quick_payparam")) {
				this.ids = uni.getStorageSync("quick_payparam")
			}

		},
		onShareAppMessage(res) {
			console.log(this.seller_id, "onshareappmessage");
			return {
				title: "福叠猫",
				path: "/pagesMy/cloudCat/shopDetails?id=" + this.seller_id + "&invite_code=" + this.user.invite_code,
				imageUrl: this.info.cover,
				desc: "福叠猫是本地生活圈的综合消费平台"
			}
		},
		onShow() {
			this.getEnv()
			this.getDetails()
			this.initList()
			this.categoryList()
			setTimeout(() => {
				if (uni.getStorageSync("token")) {
					this.getqrcode()
					this.getuser()
					// #ifdef H5
					this.getwxconfig()
					// #endif
				}

			}, 500)
		},
		methods: {
			gonext(){
				this.Downshow=false
				uni.navigateTo({
					url:"/pageUser/download/download"
				})
			},
			godown(){
				// #ifdef H5
					this.Downshow=true
				// #endif
				// #ifdef  MP-WEIXIN || MP-ALIPAY
				uni.$u.toast("请前往福叠猫App")
				// #endif
			},

			shareMalls() {
				shareMall({
					task_code: "share_mall"
				}).then(res => {

				})
			},


			categoryList() {
				const data = {
					seller_id: this.seller_id
				}
				categoryList(data).then(res => {
					console.log(res, '商家分类');

					this.category = this.category.concat(res.data)
					console.log(this.category, this.category);
				})
			},
			getcategory(item, index) {
				console.log(item, index);
				if (this.classifyActive != index) {
					this.classifyActive = index
					this.categoryId = item.classify_id
					this.page = 1
					this.initList()
				}
			},
			gosharelist() {
				uni.navigateTo({
					url: "/pageDao/groupchat/sharelist?id=" + this.seller_id + "&type=1"
				})
			},
			toPhone() {
				var that = this
				uni.showModal({
					content: that.shopDetails.customer_phone,
					success: function(res) {
						if (res.confirm) {
							uni.makePhoneCall({
								phoneNumber: that.shopDetails.customer_phone
							});
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			getuser() {
				var that = this
				myuser().then(res => {
					that.user = res.data
					console.log(that.user, "sdasdd")
					if (envflag) {
						this.fullPath =
							`https://h5.fudiemall.com/#/pagesMy/groundCat/merchantHomepagew?id=${this.seller_id}&invite_code=${this.user.invite_code}`
					} else {
						this.fullPath =
							`https://h5-test.fudiemall.com/#/pagesMy/groundCat/merchantHomepagew?id=${this.seller_id}&invite_code=${this.user.invite_code}`
					}

					console.log("走了")
				})
			},
			save1() {
				var that = this
				console.log(123456);
				uni.canvasToTempFilePath({
					canvasId: 'inviteCanvas',
					success: function(res) {
						// #ifdef H5
						that.saveImageToPhone(res.tempFilePath)
						// #endif
						// #ifdef MP-WEIXIN || MP-ALIPAY
						uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,
							success: function() {
								uni.$u.toast("保存成功")
							},
							fail: function() {
								uni.$u.toast("保存失败")
							}
						});
						// #endif



					},
					fail(reg) {
						console.log(reg);
					}
				})
			},
			tokefu() {
				if (this.shopDetails.user_id != this.user.id) {
					if (this.shopDetails.seller_type == 1) {

						// #ifdef H5
						window.location.href = "https://work.weixin.qq.com/kfid/kfcc9a6800d61bdb24d"
						// #endif

						// #ifdef MP-WEIXIN
						wx.openCustomerServiceChat({
							extInfo: {
								url: 'https://work.weixin.qq.com/kfid/kfcc9a6800d61bdb24d'
							},
							corpId: 'wwe55ef53e55448648',
							success(res) {
								console.log(res, "dadsd")
							}
						})
						// #endif

					} else {
						uni.navigateTo({
							url: '/pageDao/groupchat/singleChat?id=' + this.shopDetails.user_id +
								'&merchantName=' + this.merchantName
						})
					}


				}
			},

			saveImageToPhone(imageUrl) {
				// 创建一个新的 Image 对象
				const img = new Image();
				img.crossOrigin = 'anonymous'; // 允许跨域
				img.src = imageUrl;
				console.log(img, "sssss")
				img.onload = () => {
					// 创建一个 canvas 元素
					const canvas = document.createElement('canvas');
					const ctx = canvas.getContext('2d');

					// 设置 canvas 的宽度和高度与图片一致
					canvas.width = img.width;
					canvas.height = img.height;

					// 在 canvas 上绘制图片
					ctx.drawImage(img, 0, 0);

					// 将 canvas 内容转为图片 URL
					const dataURL = canvas.toDataURL('image/png');

					// 创建一个 a 标签
					const a = document.createElement('a');
					a.href = dataURL;
					a.download = 'image.png'; // 设置下载的文件名为 image.png

					// 模拟点击 a 标签，触发下载
					document.body.appendChild(a);
					a.click();
					document.body.removeChild(a);
				};
			},
			getEnv() {
				let isfrom;
				// 小程序环境判断
				// #ifdef MP-WEIXIN
				try {
					const systemInfo = uni.getSystemInfoSync();
					console.log(systemInfo)
					if (systemInfo.platform === 'devtools') {
						isfrom = '浏览器开发者工具';
					} else if (systemInfo.app) {
						const app = systemInfo.app.toLowerCase();
						if (app.includes('alipay')) {
							isfrom = '支付宝小程序';
						} else if (app.includes('micromessenger')) {
							isfrom = '微信小程序';
						}
					}
				} catch (error) {
					// 如果 uni.getSystemInfoSync 报错，说明可能不是小程序环境
				}
				// #endif
				// #ifdef H5
				if (!isfrom) {
					const ua = navigator.userAgent.toLowerCase();
					if (ua.match(/Alipay/i)) {
						isfrom = '支付宝浏览器';
					} else if (ua.match(/MicroMessenger/i)) {
						isfrom = '微信内置浏览器';
						this.iswxflag = true
					} else {
						isfrom = '普通浏览器';
					}
				}
				// #endif

				// H5环境判断


				// 跳转逻辑
				if (isfrom === "微信小程序" || isfrom === "微信内置浏览器") {
					// 这里可以添加微信相关的跳转逻辑
				} else {

				}
				return isfrom;
			},
			shareToWechat() {
				this.shareflag = false
				// 这里可以通过弹窗等方式引导用户点击微信右上角菜单进行分享
				uni.showModal({
					title: '分享提示',
					content: '请点击微信右上角菜单进行分享',
					showCancel: false
				});
				this.shareMalls()
			},
			getwxconfig() {
				wxConfig({
					id: this.seller_id,
					type: 4
				}).then(res => {
					wx.config({
						debug: false, // 开启调试模式,调用的所有 api 的返回值会在客户端 alert 出来，若要查看传入的参数，可以在 pc 端打开，参数信息会通过 log 打出，仅在 pc 端时才会打印。
						appId: res.data.appId, // 必填，公众号的唯一标识
						timestamp: res.data.timestamp, // 必填，生成签名的时间戳
						nonceStr: res.data.nonceStr, // 必填，生成签名的随机串
						signature: res.data.signature, // 必填，签名
						jsApiList: ['updateAppMessageShareData',
							'updateTimelineShareData'
						] // 必填，需要使用的 JS 接口列表
					});
					wx.ready(() => {
						this.setShareConfig()
						console.log("准备好了")
					});
				})
			},
			getqrcode() {
				qrcode({
					id: this.seller_id,
					type: 2
				}).then(res => {
					this.qrcodeimg = res.data
				})
			},
			setShareConfig() {
				// 分享到朋友圈
				let that = this
				wx.updateTimelineShareData({
					title: that.info.name,
					link: that.fullPath,
					imgUrl: that.info.cover,
					desc: '福叠猫云猫商家主页', // 分享描述
					success() {

						console.log('分享到朋友圈成功');
					},
					cancel() {
						console.log('取消分享到朋友圈');
					}
				});

				// 分享给好友
				wx.updateAppMessageShareData({
					title: that.info.name,
					link: that.fullPath,
					imgUrl: that.info.cover,
					desc: '福叠猫云猫商家主页', // 分享描述
					success() {

						console.log('分享给好友成功');
					},
					cancel() {
						console.log('取消分享给好友');
					}
				});
			},
			async canvasDraw(data, qrcodeimg) {
				var ctx = uni.createCanvasContext('inviteCanvas', this)
				const screenWidth = uni.getSystemInfoSync().windowWidth; // 获取屏幕宽度
				const rpxToPx = screenWidth / 750; // 计算 rpx 转 px 比例
				// 绘制圆角矩形路径（参数：x, y, width, height, 圆角半径）
				ctx.clearRect(0, 0, 690 * rpxToPx, 336 * rpxToPx);
				let avatarUrl = await new Promise((resove, reject) => {
					uni.getImageInfo({
						src: data.logo ||
							"https://images.fudiemall.com/storage/default/20250422/Q7axiJ420qRjZYfb247de39baf0adba9a88e8a2e57cb4daa2ec7e06.png",
						success: function(image) {
							console.log(image, "获取头像信息")
							resove(image.path)
						}
					});
				})
				let codeUrl = await new Promise((resove, reject) => {
					uni.getImageInfo({
						src: qrcodeimg,
						success: function(image) {
							console.log(image, "获取图片信息")
							resove(image.path)
						}
					});
				})
				const x = 0,
					y = 0,
					width = 690 * rpxToPx,
					height = 336 * rpxToPx,
					radius = 12;
				ctx.arc(x + radius, y + radius, radius, Math.PI, Math.PI * 1.5); // 左上角
				ctx.arc(x + width - radius, y + radius, radius, Math.PI * 1.5, Math.PI * 2); // 右上角
				ctx.arc(x + width - radius, y + height - radius, radius, 0, Math.PI * 0.5); // 右下角
				ctx.arc(x + radius, y + height - radius, radius, Math.PI * 0.5, Math.PI); //左下角
				// 设置填充颜色（支持 HEX、RGB、RGBA）
				ctx.setFillStyle('#ffffff');
				ctx.setTextBaseline('top')
				// 填充路径
				ctx.fill();

				const srcX = 32 * rpxToPx, //左上角x坐标
					srcY = 42 * rpxToPx, //左上角y坐标
					srcWidth = 84 * rpxToPx, //图片宽度
					srcHeight = 84 * rpxToPx; //图片高度
				ctx.drawImage(avatarUrl, srcX, srcY, srcWidth, srcHeight)
				ctx.setFillStyle('#333333');
				ctx.setFontSize(40 * rpxToPx)
				const nickname = data.name,
					bzj = '已缴纳保证金',
					zizhi = '资质已审核',
					bzjImg = 'https://images.fudiemall.com/static/ymimage/yjbzj.png',
					zizhiImg = 'https://images.fudiemall.com/static/ymimage/zzsh.png',
					nicknameX = 130 * rpxToPx, //左上角x坐标
					nicknameY = 42 * rpxToPx; //左上角y坐标
				ctx.fillText(nickname, nicknameX, nicknameY)
				const bzjX = 130 * rpxToPx, //左上角x坐标
					bzjY = 100 * rpxToPx, //左上角y坐标
					zizhiX = 320 * rpxToPx,
					zizhiY = 100 * rpxToPx,
					iconWidth = 22 * rpxToPx, //图片宽度
					iconHeight = 24 * rpxToPx; //图片高度
				ctx.drawImage(bzjImg, bzjX, bzjY, iconWidth, iconHeight)
				ctx.drawImage(zizhiImg, zizhiX, zizhiY, iconWidth, iconHeight)
				ctx.setFillStyle('#666666');
				ctx.setFontSize(24 * rpxToPx)
				ctx.fillText(bzj, bzjX + 25 * rpxToPx, bzjY)
				ctx.fillText(zizhi, zizhiX + 25 * rpxToPx, zizhiY)
				// const fdmLogo = 'https://images.fudiemall.com/static/ymimage/fdmLogo.png',
				const fdmLogo = this.baseUrl + '/static/ymimage/fdmLogo.png',
					logoX = 24 * rpxToPx, //左上角x坐标
					logoY = 155 * rpxToPx, //左上角y坐标
					logoWidth = 170 * rpxToPx, //图片宽度
					logoHeight = 44 * rpxToPx; //图片高度
				ctx.drawImage(fdmLogo, logoX, logoY, logoWidth, logoHeight)
				//
				const msg = '福叠猫是一个致力于打造一站式本地生活圈的综合消费平台，打破了传统平台垄断流量的现状，降低了商家的营销成本...',
					addressX = 32 * rpxToPx,
					addressY = 216 * rpxToPx;
				const maxLength = 20;
				const lines = [];
				for (let i = 0; i < msg.length; i += maxLength) {
					lines.push(msg.slice(i, i + maxLength));
				}
				console.log(lines);
				if (lines.length > 3) {
					lines.length = 3;
					lines[2] = lines[2].slice(0, -3) + '...';
				}
				// 逐行绘制简介
				lines.forEach((line, index) => {
					console.log(line);
					ctx.fillText(line, addressX, addressY + index * 30 * rpxToPx);
				});
				const addressLastY = addressY + (lines.length - 1) * 30 * rpxToPx;
				console.log(codeUrl);
				const srcX1 = 536 * rpxToPx,
					srcY1 = 148 * rpxToPx,
					srcWidth1 = 120 * rpxToPx,
					srcHeight1 = 120 * rpxToPx;

				ctx.drawImage(codeUrl, srcX1, srcY1, srcWidth1, srcHeight1)
				ctx.setFillStyle('#333333');
				ctx.setFontSize(24 * rpxToPx)
				const tips = "扫一扫",
					tipsX = 558 * rpxToPx, //左上角x坐标
					tipsY = 274 * rpxToPx;
				ctx.fillText(tips, tipsX, tipsY)

				// 执行绘制
				setTimeout(() => {
					console.log(123456);
					ctx.draw();
				}, 1000)
			},
			collect() {
				const data = {
					id: this.seller_id,
					scene_type: 2
				}
				shopCollect(data).then(res => {
					console.log(res);
					if (res.code == 1) {
						this.be_collect = 1
						uni.$u.toast('店铺已收藏')
					}
				})
			},
			submitsh() {
				const data = {
					id: this.seller_id,
					scene_type: 2
				}
				cancelCollect(data).then(res => {
					console.log(res);
					if (res.code == 1) {
						this.be_collect = 0
						this.flagsh2 = false
						uni.$u.toast('已取消收藏')
					}
				})
			},
			cancelCollect() {
				this.flagsh2 = true
			},
			getDetails() {
				console.log(this.seller_id);
				const data = {
					seller_id: this.seller_id
				}
				shopDetail(data).then(res => {
					console.log(res);
					if (res.code == 1) {
						this.merchantName = res.data.name
						this.shopDetails = res.data
						this.be_collect = res.data.be_collect
						this.license = res.data.seller_auth.is_show_business_license
						this.levelimg = res.data.attach.seller_level.name_image
						this.levelList = res.data.attach.seller_level.level_data.image_data
					}

				})
			},
			// 初始化
			initList() {
				let data = {
					page: this.page,
					page_size: this.size,
					search_name: this.searchName,
					category_id: this.categoryId,
					sort_field: this.sortField,
					sort_by: this.sortBy,
					zone_type: this.zoneType,
					mask: 1,
					seller_id: this.seller_id
				};
				cloudList(data).then(res => {
					console.log('商品列表', res)
					let list = res.data.data;
					this.googsList = this.page == 1 ? list : this.googsList.concat(list);
					if (list.length < this.size) this.status = 'nomore';
					else this.status = 'loading';
				})
			},
			// tokefu() {
			// 	if (this.shopDetails.user_id != this.user.id) {
			// 		uni.navigateTo({
			// 			url: '/pageDao/groupchat/singleChat?id=' + this.shopDetails.user_id
			// 		})
			// 	}
			// },

			cilckPx(e) {
				console.log(e);
				this.cursor = e
				this.sortBy = ''
				if (e == 1) {
					this.sortField = ''
				} else if (e == 2) {
					this.sortField = 'sales'
				}
				this.refreshArray()
			},
			changeTaggle1() {
				this.cursor = 2
				this.jfShow = !this.jfShow
				this.jgShow = false
				this.sortField = 'integral_proportion'
				if (this.jfShow) {
					this.sortBy = 'desc'
				} else {
					this.sortBy = 'asc'
				}
				this.refreshArray()
			},
			changeTaggle2() {
				this.cursor = 3
				this.sortField = 'price'
				this.jgShow = !this.jgShow
				this.jfShow = false
				if (this.jgShow) {
					this.sortBy = 'desc'
				} else {
					this.sortBy = 'asc'
				}
				this.refreshArray()
			},
			// 清空内容
			refreshArray() {
				this.page = 1,
					this.googsList = [],
					this.initList()
			},
			//获取页面栈的长度
			leftClick() {
				const canNavBack = getCurrentPages()
				console.log(canNavBack.length);
				// 判断是否刷新了浏览器，刷新了浏览器，页面栈只有当前一个
				if (canNavBack.length > 1) {
					uni.navigateBack({
						delta: 1
					})
				} else {
					uni.switchTab({
						url: '/pages/index/cloudCatIndex'
					})
				}
			},
			// 去详情
			goDetails(id) {
				uni.navigateTo({
					url: '/pagesMy/cloudCat/goodsDetails?id=' + id
				})
			},
			// 店铺综合评分
			clickComprehensive() {
				uni.navigateTo({
					url: '/pagesMy/cloudCat/comprehensive?id=' + this.seller_id
				})
			},
			goSearch() {
				uni.navigateTo({
					url: "/pageYm/ymJoin/ymShopSearch?type=0&id=" + this.seller_id
				})
			},
			goApplyTwo() {
				uni.navigateTo({
					url: '/pagesMy/groundCat/merchantDetails?id=' + this.seller_id + '&type=1'
				})
			},
			copyCurrentPagePath() {
				uni.setClipboardData({
					data: this.fullPath,
					success() {
						uni.showToast({
							title: '复制成功',
							icon: 'success'
						});
					},
					fail() {
						uni.showToast({
							title: '复制失败',
							icon: 'none'
						});
					}
				});
				// 复制路径到剪贴板

			},
		},


		onReachBottom() {
			console.log('触底加载');
			if (this.status != 'nomore') {
				this.page = this.page + 1
				this.initList()
			}
		}
	}
</script>
<style>
	contact-button {
		width: 146rpx;
		height: 48rpx;
		border-radius: 12rpx;
		position: absolute;
		left: 0;
		top: 0;
		opacity: 0 !important;
		z-index: 9999;
	}
</style>
<style scoped lang="scss">
	.sharebtn {
		width: 150rpx;
		position: absolute;
		left: 0;
		top: 0;
		opacity: 0 !important;
	}

	.topmain {
		width: 750rpx;
		height: 330rpx;
		/* #ifdef MP-WEIXIN */
		// height: 430rpx;
		/* #endif */
		position: relative;

	}

	.bgimg {
		width: 750rpx;
		height: 592rpx;
	}

	.back {
		position: fixed;
		/* #ifdef MP-WEIXIN */
		top: 88rpx;
		/* #endif */
		/* #ifdef MP-ALIPAY */
		top: 40rpx;
		/* #endif */
		/* #ifdef H5 */
		top: 40rpx;
		/* #endif */
		left: 20rpx;
		width: 710rpx;
		height: 88rpx;
		z-index: 999;
	}

	.storeback {
		position: absolute;
		top: 50%;
		left: 0;
		transform: translateY(-50%);
		width: 52rpx;
		height: 52rpx;
	}

	.storeRight {
		position: absolute;
		top: 50%;
		right: 0;
		/* #ifdef MP-WEIXIN */
		right: 178rpx;
		/* #endif */
		transform: translateY(-50%);
		display: flex;
		align-items: center;
	}

	.ymicon {
		width: 52rpx;
		height: 52rpx;
		margin-right: 15rpx;
	}

	.shopDetail {
		width: 750rpx;
		padding: 18rpx 30rpx;
		justify-content: space-between;
		z-index: 6;
		position: absolute;
		bottom: 10rpx;
	}

	.images {
		width: 122rpx;
		height: 122rpx;
		border-radius: 12rpx;
		margin-right: 24rpx;
	}
	.level_img1 {
		width: 116rpx;
		height: 38rpx;
		margin-right: 14rpx;
	}
	
	.level_img2 {
		width: 30rpx;
		height: 30rpx;
	}
	

	.goods_prove {
		font-size: 24rpx;
		color: #666666;
		display: flex;
		align-items: center;
	}

	.goods_prove view {
		display: flex;
		align-items: center;
		margin-right: 20rpx;
	}

	.goods_prove image {
		width: 22rpx;
		height: 24rpx;
		margin-right: 6rpx;
	}

	.bzImg {
		width: 22rpx;
		height: 24rpx;
		margin-right: 16rpx;
	}

	.goods_prove text {
		margin-right: 18rpx;
	}

	.shopInfo {
		line-height: 46rpx;
	}

	.sign {
		/* width: 76rpx;
		height: 28rpx; */
		background: #FFC300;
		border-radius: 8rpx;
		font-size: 22rpx;
		color: #FFFFFF;
		text-align: center;
		line-height: 28rpx;
		margin-right: 16rpx;
		padding: 2rpx 4rpx;
	}

	.shopName {
		font-weight: bold;
		color: #3D3D3D;
		white-space: nowrap;
		/* 防止文本换行 */
		overflow: hidden;
		/* 隐藏溢出内容 */
		text-overflow: ellipsis;
		/* 显示省略号 */
	}

	.btn_an1 {
		width: 146rpx;
		height: 48rpx;
		line-height: 48rpx;
		text-align: center;
		font-size: 28rpx;
		border-radius: 12rpx;
		border: 1rpx solid #FFC300;
		margin-bottom: 14rpx;
	}

	.btn_an2 {
		width: 146rpx;
		height: 48rpx;
		line-height: 48rpx;
		text-align: center;
		font-size: 28rpx;
		border-radius: 12rpx;
		border: 1rpx solid #999999;
		margin-bottom: 14rpx;
	}

	.ymlicense {
		width: 690rpx;
		height: 52rpx;
		padding: 0rpx 14rpx;
		position: absolute;
		bottom: 0;
		left: 30rpx;
		background-color: rgba(255, 195, 0, 0.15);
		border-radius: 4rpx;
		font-weight: 500;
		color: #3D3D3D;
		border-radius: 8rpx 8rpx 0 0;
	}

	.shopSynopsis {
		width: 690rpx;
		margin: 0 auto;
		margin-top: 20rpx;
	}

	.ification {
		width: 690rpx;
		margin: 30rpx auto;
		position: relative;
		z-index: 99;
	}

	.ification_box {
		font-size: 26rpx;
		color: #333333;
	}

	.active {
		color: #FFC300 !important;
	}

	.sj_bg {
		position: absolute;
		top: 0;
		left: 0;
		width: 750rpx;
		height: 386rpx;
		z-index: 2;
	}

	.homepage {
		width: 690rpx;
		/* height: 684rpx; */
		background: #ffffff;
		border-radius: 24rpx;
		margin-top: 30rpx;
		z-index: 9;
		padding: 0 24rpx;
		padding-bottom: 20rpx;
		overflow: hidden;
	}

	.mart20 {
		margin-top: 20rpx;
	}

	.mart42 {
		margin-top: 42rpx;
	}

	.merchantImg {
		display: flex;
		width: 690rpx;
		margin: 30rpx auto;
		overflow: auto;
		padding-bottom: 30rpx;
	}

	.linb {
		border-bottom: 1rpx solid #F2F2F2;
	}

	.goods_box>image {
		width: 160rpx;
		height: 160rpx;
		margin-right: 16rpx;
	}

	.business {
		padding: 0 0 20rpx;
	}

	.mart14 {
		margin-top: 14rpx;
	}

	.navigation {
		padding-top: 20rpx;
	}

	.navigation_l {
		width: 70%;
	}

	.navigation_r {
		width: 30%;
	}

	.navigation_r_box>image {
		width: 46rpx;
		height: 46rpx;
	}

	.navigation_r_box>text {
		font-size: 22rpx;
		color: #333333;
		margin-top: 10rpx;
	}

	.groupBuying {
		width: 690rpx;
		background: #ffffff;
		border-radius: 24rpx;
		margin: 24rpx 0;
		padding: 0 24rpx;
	}

	.groud_top {
		margin: 28rpx 0;
	}

	.groud_top>text {
		width: 136rpx;
		height: 50rpx;
		line-height: 50rpx;
		text-align: center;
		font-size: 26rpx;
		color: #333333;
		background: #F7F7F7;
		border-radius: 10rpx;
		margin-right: 24rpx;
		border: 1rpx solid #F7F7F7;
	}

	.goods {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: center;
		width: 690rpx;
		margin: 0rpx auto;
	}

	.goods_box {
		width: 336rpx;
		height: 550rpx;
		border-radius: 20rpx;
		background: #ffffff;
		margin-bottom: 20rpx;
		padding-bottom: 10rpx;
	}

	.goods_box>image {
		width: 336rpx;
		height: 336rpx;
		border-radius: 20rpx 20rpx 0rpx 0rpx;
	}

	.goods_btm {
		width: 100%;
		padding: 10rpx;
	}

	.integral {
		padding: 4rpx 14rpx;
		border-radius: 10rpx;
		margin-right: 10rpx;
	}

	.goods_btm_price {
		margin-top: 20rpx;
	}

	.price {
		margin-right: 6rpx;
	}

	.shopjianjie {
		width: 670rpx;
		background: #ffffff;
		margin: 0 auto;
		padding: 40rpx;
		padding-top: 30rpx;
		border-radius: 15rpx;
		/* padding-top: 40rpx;
		padding-bottom: 40rpx; */
	}

	.shopintr {
		margin-bottom: 20rpx;
		font-size: 40rpx;
		font-weight: bold;
	}

	/* .u-popup__content{
	width: 70%;
} */
	.prompt {
		width: 600rpx;
		background: #ffffff;
		margin: 0 auto;
		border-radius: 20rpx;
		padding-top: 10rpx;
		padding-bottom: 40rpx;
	}

	.prompt>text {
		margin-top: 40rpx;
	}

	.prompt_tit {
		margin: 0 30rpx;
		font-size: 28rpx;
		color: #666666;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}

	.prompt_ntm {
		width: 100%;
		font-size: 30rpx;
		margin-top: 50rpx;
	}

	.prompt_ntm>text:nth-child(1) {
		width: 200rpx;
		height: 72rpx;
		line-height: 72rpx;
		text-align: center;
		background: #F2F2F2;
		border-radius: 40rpx;
		color: #333333;
	}

	.prompt_ntm>text:nth-child(2) {
		width: 200rpx;
		height: 72rpx;
		line-height: 72rpx;
		text-align: center;
		background: linear-gradient(90deg, #FA2222 2%, #FFC400 98%);
		border-radius: 40rpx;
		color: #ffffff;
	}

	.shareimg {
		width: 50rpx;
		height: 50rpx;

	}

	.sms {
		width: 32rpx;
		height: 30rpx;
		margin-right: 16rpx;
	}

	.shareitem {
		width: 150rpx;
		margin-top: 50rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-left: 20rpx;
		position: relative;
	}

	.shareitem>text {
		font-weight: 400;
		font-size: 24rpx;
		color: #333333;
		margin-top: 14rpx;
	}

	.shareitem>image {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 80rpx;
		height: 80rpx;
	}

	.sharewrap {
		width: 750rpx;
		height: 200rpx;
		background: #ffffff;
		display: flex;
	}

	.hbwraps {
		width: 690rpx;
		margin: 0 auto;
		// margin-top: 80rpx;
		/* background: #ffffff; */
		height: 800rpx;
	}

	.btn {
		width: 690rpx;
		height: 76rpx;
		background: linear-gradient(270deg, #FA2222 2%, #FFC400 98%);
		border-radius: 64rpx 64rpx 64rpx 64rpx;
		text-align: center;
		font-weight: 400;
		font-size: 28rpx;
		color: #FFFFFF;
		line-height: 76rpx;
		margin-top: 30rpx;
	}

	.astoreclass {
		width: 750rpx;
		background: #ffffff;
		padding: 24rpx 30rpx 30rpx;
		display: flex;
		align-items: center;
		position: relative;
		z-index: 15;
		overflow: auto;
		overflow-x: scroll
	}

	.classify_item {
		width: 158rpx;
		height: 48rpx;
		background: #F7F7F7;
		border-radius: 6rpx 6rpx 6rpx 6rpx;
		margin-right: 24rpx;
		text-align: center;
		line-height: 48rpx;
		color: #999999;
		white-space: nowrap;
		flex-shrink: 0;
	}

	.classifyActive {
		background-color: rgba(255, 195, 0, 0.1);
		border: 1rpx solid #FFC300;
		color: #FFC300;
		font-size: 28rpx;
		text-align: center;
		line-height: 48rpx;
	}

	.bottab{
		width: 750rpx;
		height: 90rpx;
		background: #FFFFFF;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		position: fixed;
		bottom: 0rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}
	.bottabitem{
		height: 40rpx;
		width: 30%;
		border-right: 2rpx solid #dedede;
		text-align: center;
		
	}
	.bwrap {
		width: 750rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 0 auto;
		margin-top: 24rpx;
		position: relative;
		z-index: 66;
		
	}
	
	.bwrapitem {
		width: 40%;
		border-right: 2rpx solid #f2f2f2;
		text-align: center;
	
	
	}
	
	.num {
		font-weight: 600;
		font-size: 32rpx;
		color: #333333;
	}
	
	.txt {
		font-weight: 400;
		font-size: 26rpx;
		color: #999999;
		margin-top: 10rpx;
	}
	
	.tab-nav {
		width: 690rpx;
		height: 60rpx;
		/* background-color: #fff; */
		
		display: flex;
		align-items: center;
		flex-wrap: nowrap;
		overflow: auto;
		margin: 0 auto;
	margin-top: 20rpx;
		overflow-x: auto;
		/* 允许横向滚动 */
		overflow-y: hidden;
		/* 隐藏纵向滚动 */
		-webkit-overflow-scrolling: touch;
		/* 在iOS上实现平滑滚动 */
		white-space: nowrap;
		/* 防止子元素换行 */
		/* 隐藏滚动条（可选） */
		scrollbar-width: none;
	
		/* Firefox */
		&::-webkit-scrollbar {
			display: none;
			/* Chrome/Safari */
		}
	
		.tab-list-item {
			position: relative;
			min-width: 166rpx;
			height: 52rpx;
			background:#FFF6D9;
			border-radius: 12rpx 12rpx 12rpx 12rpx;
			margin-right: 18rpx;
			
			/* 设置最小宽度防止内容挤压 */
			display: inline-flex;
			/* 改为行内flex布局 */
			flex-shrink: 0;
			/* 防止子项被压缩 */
			justify-content: center;
			align-items: center;
	
			.text {
			
				// padding: 10rpx;
				margin-left: 6rpx;
				opacity: 1;
				
				text-align: center;
				font-weight: 500;
				font-size: 24rpx;
				color: #666666;
				z-index: 99;
				position: relative;
			}
	
			>image {
				width: 22rpx;
				height: 24rpx;
			}
		}
	}
		.prompt {
			width: 600rpx;
			background: #ffffff;
			margin: 0 auto;
			border-radius: 20rpx;
			padding-top: 10rpx;
			padding-bottom: 40rpx;
		}
		
		.prompt>text {
			margin-top: 40rpx;
		}
		
		.prompt_tit {
			margin: 0 30rpx;
			font-size: 28rpx;
			color: #666666;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			overflow: hidden;
		}
		
		.prompt_ntm {
			width: 100%;
			font-size: 30rpx;
			margin-top: 50rpx;
		}
		
		.prompt_ntm>text:nth-child(1) {
			width: 200rpx;
			height: 72rpx;
			line-height: 72rpx;
			text-align: center;
			background: #F2F2F2;
			border-radius: 40rpx;
			color: #333333;
		}
		
		.prompt_ntm>text:nth-child(2) {
			width: 200rpx;
			height: 72rpx;
			line-height: 72rpx;
			text-align: center;
			background: linear-gradient(90deg, #FA2222 2%, #FFC400 98%);
			border-radius: 40rpx;
			color: #ffffff;
		}

</style>